<template>
  <div>
    <div id="register-area" />
    <RegisteTableDialog ref="registeTableDialog" />
  </div>
</template>
<script>
import { getFilingAmountGroupByOrg } from '@/api/filing'
import echarts from 'echarts'
import resize from '../mixins/resize'
import RegisteTableDialog from './RegisteTableDialog.vue'
export default {
  components: {
    RegisteTableDialog
  },
  mixins: [resize],
  props: {
    year: Number
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    getParams() {
      const params = {
        startDate: `${this.year}-01-01`,
        endDate: `${this.year}-12-31`
      }
      return params
    },
    // initChart() {
    //   this.chart = echarts.init(document.getElementById('register-area'))
    //   const xAxis = []
    //   const data = []
    //   const dischargeTrend = [
    //     {
    //       time: '龙池镇',
    //       number: 10
    //     },
    //     {
    //       time: '蒲阳街道',
    //       number: 20
    //     },
    //     {
    //       time: '天马镇',
    //       number: 30
    //     },
    //     {
    //       time: '聚源镇',
    //       number: 40
    //     },
    //     {
    //       time: '石羊镇',
    //       number: 30
    //     },
    //     {
    //       time: '青城山镇',
    //       number: 40
    //     },
    //     {
    //       time: '玉堂街道',
    //       number: 55
    //     },
    //     {
    //       time: '幸福街道',
    //       number: 20
    //     }
    //   ]
    //   dischargeTrend.forEach((item) => {
    //     xAxis.push(item.time)
    //     data.push(item.number)
    //   })
    //   const option = {
    //     grid: {
    //       left: '5',
    //       right: '5',
    //       top: '30',
    //       bottom: '22',
    //       containLabel: true
    //     },
    //     tooltip: {
    //       show: true,
    //       trigger: 'item'
    //     },
    //     xAxis: {
    //       data: xAxis,
    //       axisLine: {
    //         lineStyle: {
    //           color: '#AFECFF'
    //         }
    //       },
    //       axisTick: {
    //         show: false,
    //         lineStyle: {
    //           color: '#3EA7E3'
    //         }
    //       },
    //       axisLabel: {
    //         color: '#fff',
    //         fontSize: 12
    //       }
    //     },
    //     yAxis: [
    //       {
    //         type: 'value',
    //         axisLine: {
    //           show: false,
    //           lineStyle: {
    //             color: '#AFECFF'
    //           }
    //         },
    //         axisLabel: {
    //           color: '#AFECFF',
    //           fontSize: 12
    //         },
    //         axisTick: {
    //           show: true,
    //           lineStyle: {
    //             color: '#fff'
    //           }
    //         },
    //         splitLine: {
    //           show: true,
    //           lineStyle: {
    //             color: '#11366e'
    //           }
    //         }
    //       }
    //     ],
    //     series: [
    //       {
    //         type: 'bar',
    //         barWidth: 8,
    //         itemStyle: {
    //           normal: {
    //             color: new echarts.graphic.LinearGradient(
    //               0,
    //               0,
    //               0,
    //               1,
    //               [
    //                 {
    //                   offset: 0,
    //                   color: '#4FACFE'
    //                 },
    //                 {
    //                   offset: 0.8,
    //                   color: '#00F2FE'
    //                 }
    //               ],
    //               false
    //             )
    //           }
    //         },
    //         label: {
    //           normal: {
    //             show: true,
    //             lineHeight: 30,
    //             width: 80,
    //             align: 'center',
    //             color: '#FFf',
    //             fontSize: 16,
    //             height: 30,
    //             position: ['6', '-23'],
    //             distance: 1
    //           }
    //         },
    //         data: data
    //       }
    //     ]
    //   }
    //   this.chart.clear() // 清除画布，重新绘制的时候就不会遗留之前的数据，解决高度数据变化echarts高度不变问题
    //   this.chart.setOption(option) // 重新绘制图标
    // }
    async initChart() {
      const res = await getFilingAmountGroupByOrg()
      console.log(res)
      const color = ['#00D7E9', '#7AF3C2', '#8A8AFF', '#13AFFF']
      const resData = res.data.map((item, index) => {
        return {
          ...item,
          color: color[index] || '#00D7E9'
        }
      })
      this.chart = echarts.init(document.getElementById('register-area'))

      var data = {
        dataAge: resData
      }
      const option = {
        grid: {
          left: '5',
          right: '5',
          top: '15',
          bottom: '5'
        },
        color: ['#00D7E9', '#7AF3C2', '#8A8AFF', '#13AFFF'],
        series: [
          {
            color: ['#00D7E9', '#7AF3C2', '#8A8AFF', '#13AFFF', '#FFF5A7'],
            type: 'pie',
            radius: ['60', '88'],
            minAngle: 15, // 最小角度
            startAngle: 45, // 起始角度
            avoidLabelOverlap: true,
            labelLine: {
              normal: {
                length: 10,
                length2: 30,
                lineStyle: {
                  type: 'solid'
                }
              }
            },
            label: {
              normal: {
                formatter: (params) => {
                  return `{c|${params.percent.toFixed(0)}%}\n{b|${
                    params.name
                  }}`
                },
                borderWidth: 0,
                borderRadius: 4,
                fontSize: 13,
                align: 'center',
                color: '#3494BD',
                rich: {
                  b: {
                    fontSize: 12,
                    lineHeight: 20,
                    padding: [0, 0, 5, 0]
                  },
                  c: {
                    fontSize: 20,
                    lineHeight: 20,
                    color: '#ffffff'
                  }
                }
              }
            },
            data: data.dataAge
          },

          {
            type: 'pie',
            radius: ['58', '59'],
            data: [100],
            label: {
              show: false
            }
          }
        ]
      }

      this.chart.clear() // 清除画布，重新绘制的时候就不会遗留之前的数据，解决高度数据变化echarts高度不变问题
      this.chart.setOption(option) // 重新绘制图标
      this.chart.on('click', (params) => {
        const dateParams = this.getParams()
        const showParams = {
          ...dateParams,
          id: params.data.id
        }
        console.log(showParams)
        this.showDialog(showParams)
      })
      // let currentIndex = -1; // 当前高亮图形在饼图数据中的下标
      // let changePieInterval = setInterval(selectPie, 2500); // 设置自动切换高亮图形的定时器

      // function highlightPie() {
      //   // 取消所有高亮并高亮当前图形
      //   // 遍历饼图数据，取消所有图形的高亮效果
      //   for (var idx in option.series[0].data)
      //     this.chart.dispatchAction({
      //       type: "downplay",
      //       seriesIndex: 0,
      //       dataIndex: idx,
      //     });
      //   // 高亮当前图形
      //   this.chart.dispatchAction({
      //     type: "highlight",
      //     seriesIndex: 0,
      //     // type: 'showTip',
      //     dataIndex: currentIndex,
      //   });
      // }

      // this.chart.on("mouseover", (params) => {
      //   // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
      //   clearInterval(changePieInterval);
      //   currentIndex = params.dataIndex;
      //   highlightPie();
      // });

      // this.chart.on("mouseout", (params) => {
      //   // 用户鼠标移出时，重新开始自动切换
      //   if (changePieInterval) clearInterval(changePieInterval);
      //   changePieInterval = setInterval(selectPie, 2500);
      // });

      // function selectPie() {
      //   // 高亮效果切换到下一个图形
      //   var dataLen = option.series[0].data.length;
      //   currentIndex = (currentIndex + 1) % dataLen;
      //   highlightPie();
      // }
    },
    showDialog(showParams) {
      this.$refs.registeTableDialog.show(showParams)
    }
  }
}
</script>
<style>
#register-area {
  width: 100%;
  height: 300px;
}
</style>
